<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.imgareaselect.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
	$('#icon').imgAreaSelect({
	    x1: 100, y1: 100, x2: 200, y2: 200,
	    aspectRatio: '1:1',
	    handles: true,
	    fadeSpeed: 200,
	    onSelectChange: preview
	});
 });

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;

    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;
    $('#preview img').css({
        width: Math.round(scaleX * $('#icon').width()),
        height: Math.round(scaleY * $('#icon').height()),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
}
function preview1(img, selection) {
    if (!selection.width || !selection.height)
        return;
    
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);    
}
 
</script>
<div align="center">
<table align="center">
    <tr>
        <td>
            <div><img id="icon" src="bee.jpg" style="width: 400px; "/></div>
        </td>
        <td>
            <div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
                <img id="icon_min" src="bee.jpg" style="width: 100px; height: 100px;" />
            </div>
        </td>
    </tr>
</table>
<table >
    <tr>
      <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
          <td style="width: 30%;"><input type="text" id="x1" value="100" /></td>
          <td style="width: 20%;"><b>Width:</b></td>
        <td><input type="text" value="100" id="w" /></td>
    </tr>
    <tr>
      <td><b>Y<sub>1</sub>:</b></td>
      <td><input type="text" id="y1" value="100" /></td>
      <td><b>Height:</b></td>
      <td><input type="text" id="h" value="100" /></td>
    </tr>
    <tr>
      <td><b>X<sub>2</sub>:</b></td>
      <td><input type="text" id="x2" value="200" /></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td><b>Y<sub>2</sub>:</b></td>
      <td><input type="text" id="y2" value="200" /></td>
      <td></td>
      <td></td>
    </tr>
</table>

</div>